<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
        <el-menu :default-openeds="['1', '3']" router     background-color="#ccc">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>账户管理
            </template>
              <el-menu-item index="/">首页</el-menu-item>
              <el-menu-item index="/about">about</el-menu-item>
          </el-sub-menu>
        </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
          <h2>千锋管理系统</h2>
          <span>Tom</span>
      </el-header>
      <el-main>
         <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
export default {
  components:{
    IconMenu,Message,Setting
  }
}

</script>
<style>
html,body,#app{
  height:100%;
}
.el-container{
  height: 100%;
}
.el-aside{
  background:#ccc;
}
</style>